<template>
<canvas 
    class="cp-container-novak-chart-info"
    ref="Canvas">
</canvas>
</template>
<script>
//斯蒂夫相图图表组件，展示详细数据
export default {
    props:{
        pointData:{  //点数据
            type:Array,
            default:()=>[],
        },
    },
    data() {
        return {
            padding:[30,20,50,20],  //上右下左填充值
            height:0,  //容器高度
            width:0,  //容器宽度
            CanvasEl:undefined,
            axisStartPoint:[0,0],  //坐标轴起点
            axisEndPoint:[0,0],  //坐标轴终点
            lineSquareNumber:20,  //线条上的格子数量
            lineSquareValue:20,  //线条上的每个格子的数值
            line0:[],  //第1条线起始点坐标
            line1:[],  //第2条线起始点坐标
            line2:[],  //第3条线起始点坐标
            rectContext:undefined,  //绘制矩形的画布 
            lineColor:"#B8DBFF",  //线条颜色
            bgColor:'#1a83ff',  //填充背景颜色
        };
    },
    watch:{
        pointData(newValue){
            this.drawRect(newValue);
        },
    },
    mounted(){
        this.CanvasEl = this.$refs.Canvas;
        this.height = this.CanvasEl.clientHeight;
        this.width = this.CanvasEl.clientWidth;
        this.CanvasEl.width = this.width;
        this.CanvasEl.height = this.height;
        this.axisStartPoint = [this.padding[3],this.padding[0]];
        this.axisEndPoint = [this.width - this.padding[1],this.height - this.padding[2]];
        this.lineWidth = this.width - this.padding[1] - this.padding[3];
        this.line0 = [
            this.axisStartPoint,
            [this.axisEndPoint[0],this.axisStartPoint[1]],
        ];  //第1条线
        this.line1 = [
            [this.axisStartPoint[0],(this.axisEndPoint[1] - this.axisStartPoint[1])/2 + this.padding[0]],
            [this.axisEndPoint[0],(this.axisEndPoint[1] - this.axisStartPoint[1])/2 + this.padding[0]],
        ];  //第2条线
        this.line2 = [
            [this.axisStartPoint[0],this.axisEndPoint[1]],
            [this.axisEndPoint[0],this.axisEndPoint[1]],
        ];  //第3条线
        this.drawRect(this.pointData);
    },
    methods:{
        drawAxis(){  //绘制坐标轴
            let context = this.CanvasEl.getContext('2d');
            context.fillStyle = this.lineColor;
            context.strokeStyle = this.lineColor;
            context.lineWidth = 1;
            context.font="15px Arial";
            context.textAlign = "center";
            let lineWidth = this.lineWidth;
            for(let i=0;i<3;i++){
                let line = this['line'+i];  //选择线条坐标
                context.beginPath();
                context.moveTo(...line[0]);
                context.lineTo(...line[1]);
                context.closePath();
                context.stroke();
                for(let i=0;i<=this.lineSquareNumber;i++){
                    let height = 10;
                    if(i%2 === 0){
                        height = 15;
                        context.fillText(Math.abs((this.lineSquareNumber*this.lineSquareValue)/2-i*this.lineSquareValue),i*lineWidth/this.lineSquareNumber + this.padding[3],line[0][1] + height + 17);
                    }
                    context.beginPath();
                    context.moveTo(i*lineWidth/this.lineSquareNumber + this.padding[3],line[0][1]);
                    context.lineTo(i*lineWidth/this.lineSquareNumber + this.padding[3],line[0][1] + height);
                    context.closePath();
                    context.stroke();
                }
            }
        },
        drawRect(pointData=[]){  //绘制矩形(可外部调用)
            if(!this.rectContext){
                this.rectContext = this.CanvasEl.getContext('2d');
                this.rectContext.translate(0.5,0.5);  //移动0.5，防止1px绘制不清晰
            }
            let context = this.rectContext;
            context.clearRect(0,0,this.width,this.height);  //先清除之前的画布
            context.font="bold 16px Arial";
            context.lineWidth = 1;
            context.strokeStyle = this.lineColor;
            //依次计算6个点
            let point0 = [
                this.computeXPoint(pointData[0],'left'),
                this.line0[0][1],
            ];
            let point1 = [
                this.computeXPoint(pointData[1],'right'),
                this.line0[0][1],
            ];
            let point2 = [
                this.computeXPoint(pointData[2],'left'),
                this.line1[0][1],
            ];
            let point3 = [
                this.computeXPoint(pointData[3],'right'),
                this.line1[0][1],
            ];
            let point4 = [
                this.computeXPoint(pointData[4],'left'),
                this.line2[0][1],
            ];
            let point5 = [
                this.computeXPoint(pointData[5],'right'),
                this.line2[0][1],
            ];
            //绘制点
            var gr = context.createLinearGradient(0, 0, 0, this.height);
            gr.addColorStop(0, '#24e7de');
            gr.addColorStop(1, this.bgColor);
            context.fillStyle = gr;
            context.beginPath();
            context.moveTo(...point0);
            context.lineTo(...point1);
            context.lineTo(...point3);
            context.lineTo(...point5);
            context.lineTo(...point4);
            context.lineTo(...point2);
            context.closePath();
            context.stroke();
            context.fill();
            //绘制6个点的文字信息
            context.fillStyle = this.lineColor;
            context.textAlign = "right";
            context.fillText("Ca/Mg",point0[0],point0[1]-5);
            context.textAlign = "left";
            context.fillText("Na/Ca",point1[0],point1[1]-5);
            context.textAlign = "left";
            context.fillText("(Na+K)/(Ca+Mg)",point3[0]+5,point3[1]-5);
            context.textAlign = "left";
            context.fillText("Na/K",point5[0]+5,point5[1]-5);
            context.textAlign = "right";
            context.fillText("Mg/K",point4[0]-5,point4[1]-5);
            context.textAlign = "right";
            context.fillText("Na/Mg",point2[0]-5,point2[1]-5);
            //绘制坐标轴
            this.drawAxis();
        },
        computeXPoint(x,location='left'){  //根据点数据计算x轴的相对位置
            x = Math.min(x,220);
            let value = this.lineSquareNumber * this.lineSquareValue;
            let rate = x/(value/2);
            if(location=='left'){  //表示是左边的点
                return (this.lineWidth/2) - (this.lineWidth/2 * rate) + this.padding[3];
            }else{
                return (this.lineWidth/2) + (this.lineWidth/2 * rate) + this.padding[3];
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.cp-container-novak-chart-info{
    width: 100%;
    height: 100%;
}
</style>